<template>
  <div class="main">
    <div class="head" v-if="!user">
      <div class="head-top">
        <van-icon name="setting-o" size="18px" @click="updateuserinfo()"/>
        <van-icon name="service-o" size="18px" @click="updateuserinfo()"/>
      </div>
      <div class="head-body">
        <div class="text">
          MIXIN
        </div>
        <div class="button">
          <van-button size="small" @click="goto('login')" color="linear-gradient(to right, #d79f65, #db7812)">
            登录
          </van-button>
          <van-button size="small" @click="goto('register')"  class="opacity" color="#ffffff" plain>注册</van-button>
        </div>
      </div>
    </div>
    <div v-else class="activehead">
      <div class="head-top">
        <van-icon name="setting-o" size="18px" @click="updateuserinfo()"/>
        <van-icon name="service-o" size="18px" @click="updateuserinfo()"/>
      </div>
      <div class="head-body">
        <div class="usermain">
          <img v-if="!user.tx" src="@/assets/img/defaulttx.png" @click="updateuserinfo()" class="usertx">
          <img v-else :src="user.tx" class="usertx" @click="updateuserinfo()">
          
          <div class="userdetail">
            <div class="username">{{user.username}}</div>
            <div class="vip">{{user.vip}}</div>
          </div>
        </div>
        <div class="otherdetail">
          <a>
            <span>我的收藏 <span class="num">{{`${user.collecting?user.collecting:0}`}}</span> ></span>
          </a>
          <a>
            <span>积分 <span class="num">{{`${user.score?user.score:0}`}}</span> ></span>
          </a>
          <a>
            <span>优惠券 <span class="num">{{`${user.coupon?user.coupon:0}`}}</span> ></span>
          </a>
        </div>
      </div>
    </div>

    <div class="body">
      <div class="orderlist">
        <div class="normal-item" @click="goto('/user/userlog')">
          <img src="@/assets/img/list-icon.png" >
          <span>全部记录</span>
        </div>
        <div class="normal-item">
          <img src="@/assets/img/custom-icon.png" >
          <span>待定</span>
        </div>
        <div class="normal-item">
          <img src="@/assets/img/setting-icon.png" >
          <span>设置</span>
        </div>
        <div class="normal-item">
          <img src="@/assets/img/echarts-icon.png" >
          <span>图表</span>
        </div>
      </div>
      <div class="applist">
        <div class="grid-head-list">
          <span>发现</span>
          <span>更多></span>
        </div>
        <div class="grid-body-list">
          <div class="grid-body-item">
            <img src="@/assets/img/setting-icon.png" >
            <span class="title">应用1</span>
            <span class="subtitle">副标题</span>
          </div>
          <div class="grid-body-item">
            <img src="@/assets/img/setting-icon.png" >
            <span class="title">应用1</span>
            <span class="subtitle">副标题</span>
          </div>
          <div class="grid-body-item">
            <img src="@/assets/img/setting-icon.png" >
            <span class="title">应用1</span>
            <span class="subtitle">副标题</span>
          </div>
          <div class="grid-body-item">
            <img src="@/assets/img/setting-icon.png" >
            <span class="title">应用1</span>
            <span class="subtitle">副标题</span>
          </div>
          <div class="grid-body-item">
            <img src="@/assets/img/setting-icon.png" >
            <span class="title">应用1</span>
            <span class="subtitle">副标题</span>
          </div>
        </div>
      </div>
      <div class="applist">
        <div class="grid-head-list">
          <span>工具</span>
        </div>
        <div class="grid-body-list">
          <div class="grid-body-item">
            <img src="@/assets/img/setting-icon.png" >
            <span class="title">应用1</span>
          </div>
          <div class="grid-body-item">
            <img src="@/assets/img/setting-icon.png" >
            <span class="title">应用1</span>
          </div>
          <div class="grid-body-item">
            <img src="@/assets/img/setting-icon.png" >
            <span class="title">应用1</span>
          </div>
          <div class="grid-body-item">
            <img src="@/assets/img/setting-icon.png" >
            <span class="title">应用1</span>
          </div>
          <div class="grid-body-item">
            <img src="@/assets/img/setting-icon.png" >
            <span class="title">应用1</span>
          </div>
        </div>
      </div>
      <div class="out" v-show="user">
        <button class="outbtn" @click="outlogin()">退出登录</button>
      </div>
    </div>
    
  </div>
</template>

<script>
import {getUserInfo} from '@/api/user'
import {mapGetters} from 'vuex'
import {Dialog} from 'vant'
export default {
  name:'User',
  data(){
    return {
      // user:{
      // //   tx:'',
      // //   username:'1309003763', //用户名
      // //   vip:'vip1', //vip
      // //   collecting:5, //收藏
      // //   score:123,  //积分
      // //   coupon:5,  //优惠券
      // }
    }
  },
  
  mounted(){
    

  },
  computed:{
    ...mapGetters([
      'user'
    ])
  },
  methods:{
    updateuserinfo(){//跳转到修改用户信息页面
      if(this.user){
        this.$router.push({path:'/user/update'});
      }else{
        this.$router.push({path:'/user/login'});
      }
      
    },
    goto(val){
      this.$router.push({path:val});
    },
    outlogin(){
      Dialog.confirm({
        title: '登出',
        message: '确定要退出吗？',
      }).then(async ()=>{
        await this.$store.dispatch('user/outlogin');
        if(this.$route.path.indexOf('/user/index') == -1){
          this.$router.push('/user/index');
        }

        
      }).catch(()=>{

      })

      
    }
  }
}
</script>

<style lang="scss" scoped>
  a{
    text-decoration: none;
  }
  .head{
    background: url('~@/assets/img/unlogin.jpg') no-repeat;
    & .head-body{
    flex: 0 1 60%;
    display: flex;
    align-content: space-around;
    justify-content: space-around;
    flex-direction: column;
    & .text{
      color: #ffffff;
      font-size: 24px;
      text-align: center;
    }
    & .button{
      
      display: flex;
      justify-content: space-around;
      align-content: space-around;
      & button{
        flex: 0 1 40%;
        border-radius: 5px;
      }
      & .opacity{
        background:rgba(0,0,0,0.1);
      }
    }
  }
  }
  .activehead{
    background: url('~@/assets/img/login.jpg') no-repeat;
    & .head-body{
      margin: 10px;
      font-size: 12px;
      color: rgb(136, 136, 136);
      flex: 0 1 60%;
      display: flex;
      flex-direction: column;
      justify-content: center;
      & .usermain{
        flex: 0 0 50%;
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        & .usertx{
          flex: 0 1 50px;
          height: 50px;
          margin-right: 10px;
          border-radius: 50%;
          background-size: cover;
        }
        & .userdetail{
          height: 50px;
          display: flex;
          flex-direction: column;
          align-content: center;

          & .username{
            flex: 0 1 30%;
            font-size: 18px;
            font-weight: 400;
            color: #000000;
            margin: 2px;
          }
          & .vip{
            flex: 0 1 20%;
            background-color: #ffffff;
            border-radius: 8px;
            width: 50px;
            text-align: center;
            margin: 2px;
          }
        }
      }

      & .otherdetail{
        
        flex: 0 0 15%;
        margin: 10px;
        display: flex;
        padding: 0 10%;
        justify-content: space-around;
        & span{
          color: rgb(136, 136, 136);
        }
        & .num{
          font-weight: 400;
          color: #000000;
          font-size: 14px;
        }
      }
      
  }
  }
  .head,.activehead{
    
    background-size: cover;
    @include wh(100%,22vh);
    display: flex;
    flex-direction: column;
    align-content: space-around;
  }
  .head-top{
    flex: 0 1 25%;
    padding-top: 20px;
    display: flex;
    justify-content: flex-start;
    height: 24px;
    align-items: center;
    color: white;
    & i{
      margin: 0 6px;
    }
  }
  
  .main{
    
    background-color:rgba(238, 238, 238, 1);
    & .body{
      display: flex;
      flex-direction: column;
      margin: 0 10px;
      padding-bottom: 20vh;
      &>div{
        margin-top: 10px;
      }
      & .orderlist{
        display: flex;
        flex-direction: row;
        justify-content: space-around;
        background-color: #ffffff;
        padding: 10px;
        border-radius: 5px;
      }
      & .applist{
        display: flex;
        flex-direction: column;
        align-content: space-around;
        padding:10px;
        background-color: #ffffff;
        border-radius: 5px;
        & .grid-head-list{
          flex: 0 1 26px;
          display: flex;
          flex-direction: row;
          justify-content: space-between;
          &>span:nth-child(1){
            font-size: 16px;
          }
          &>span:nth-child(2){
            font-size: 14px;
            color: rgb(165, 165, 165);
          }
        }
        & .grid-body-list{
           flex-wrap: wrap;
          flex: 0 1 80px;
          display: flex;
          flex-direction: row;
          justify-content: flex-start;
          & .grid-body-item{
            margin-bottom: 10px;
            flex: 0 25%;
            height: 70px;
            display: flex;
            align-content: space-around;
            flex-direction: column;
            text-align: center;
            justify-content: space-around;
            & img{
              width: 36px;
              height: 36px;
              margin: 0 auto;
            }
            & .title{
              font-size: 14px;
              color: #000000;
            }
            & .subtitle{
              font-size: 14px;
              color: rgb(165, 165, 165);
            }
          }
        }
      }
      & .out{
        display: flex;
        justify-content: center;
      }
      & .outbtn{
        flex: 0 1 120px;
        border: 1px solid rgba(0,0,0,1);
        border-radius: 10px;
        padding: 5px 20px;
      }
      
    }
  }

  .normal-item{
    
    flex: 0 1 20%;
    height: 60px;
    display: flex;
    align-content: space-around;
    flex-direction: column;
    text-align: center;
    justify-content: space-around;
    & img{
      width: 36px;
      height: 36px;
      margin: 0 auto;
    }
    & span{
      font-size: 14px;
    }
  }



  
</style>